<template>
	<view class="biding_warp flex f_column">
		<view class="biding_item flex f_align f_align_center"
			v-for="(item,index) in rankList" :key="index"
			@click="watchInfos(item,index)"
		>
			<view class="flex f_align_center">
				<view class="fb_user_rank" v-if="index <= 2">
					<image class="autoImg" :src="'/static/ico/rank'+index+'@2x.png'" mode=""></image>
				</view>
				<view v-else class="fb_user_rank bold">{{index+1}}</view>
				<view class="flex f_align_center">
					<view class="fb_user_head">
						<image class="autoImg" :src="item.userHeadUrl" mode=""></image>
					</view>
					<view class="flex f_column f_align rank_info">
						<view class="bold">{{item.userName}}</view>
						<view class="fb_time">{{item.createTime}}</view>
					</view>
				</view>
			</view>
			<view class="bold rank_m">
				{{item.goldCoinAmount}}金币
			</view>
		</view>
		<view class="biding_btn_warp bold">
			<view class="biding_btn" @click="$navTo(`../biding/biding?itemId=${itemId}`)">
				我要竞价
			</view>
		</view>
		<!-- 加载 -->
		<loadMore :isLoading="isLoading" :isDone="isDoneTask" />

		<!--123-->
		<toast :visible.sync="visibleToast" :showClose="false">
			<template slot="content">
				<view class="warps_info" v-if="!isJumps">
					<view class="t_title bold">竞价信息</view>
					<view class="t_title_e">User information</view>
					<view class="t_title_name">用户联系方式</view>
					<view class="f f_align_center" @click="$copy(jjItems.mobile)">
						<text>电话：{{jjItems.mobile}}</text>
						<image class="ico_copy" src="/static/ico/copy@2x.png" mode=""></image>
					</view>
					<view v-if="jjItems.wechatNo" class="f f_align_center t_top" @click="$copy(jjItems.wechatNo)">
						<text>微信：{{jjItems.wechatNo}}</text>
						<image class="ico_copy" src="/static/ico/copy@2x.png" mode=""></image>
					</view>

					<view class="t_bottom_btn f f_align f_align_center">
						<view class="btn_t" @click="visibleToast = false">取消</view>
						<view class="btn_t" @click="isJumps = true">跳过</view>
					</view>
				</view>

				<view class="jump_ranks" v-else>
					<view class="bold">跳过提示</view>
					<view class="t_j_text">跳过将忽略他的竞价排名，跳过后无法再次查看，请注意</view>
					<view class="t_bottom_btn f f_align f_align_center">
						<view class="btn_t" @click="isJumps = false">取消</view>
						<button :loading="loadingJump" @click="bindingEiame" class="btn_t tips bold">确认跳过</button>
					</view>
				</view>
			</template>
		</toast>
	</view>
</template>

<script>
	import loadMore from '@/components/loadMore/loadMore'
	export default {
		components:{
			loadMore
		},
		data() {
			return {
				rankList:[],
				itemId:'',
				userId:'',

				isLoading:false,
				isDoneTask:false,
				page:{
					pageIndex:1,
					limit:20,
					totalPage:0
				},
				visibleToast:false,
				isJumps:false,

				jjItems:{

				},
				loadingJump:false
			};
		},
		onLoad(option) {
			if(option.itemId){
				this.itemId = option.itemId;
				this.userId = option.userId;
			}
		},
		onShow() {
			this.getRankList();
		},
		methods:{
			//查询竞价排行列表0
			async getRankList(){
				const _this = this;
				_this.isLoading = true;
				_this.isDoneTask = false;

				let res = (await _this.$http('/api/auth/item/listItemBidding','POST',{
					page:_this.page.pageIndex,
					limit:_this.page.limit,
					itemId:_this.itemId
				})).data;
				uni.stopPullDownRefresh();
				_this.isLoading = false;
				console.log(res)
				if(res && res.code == '0'){
					let list = res.data.list;
					_this.page.totalPage = res.data.totalPage;
					if(_this.page.pageIndex <= 1){
						_this.rankList.splice(0);
					}
					if(_this.page.totalPage <= _this.page.pageIndex){
						_this.isDoneTask = true;
					}else{
						_this.isDoneTask = false;
					}
					_this.rankList = _this.rankList.concat(list);
				}else{
					_this.$showToast(res.msg);
				}
			},
			//查看竞价信息
			watchInfos(item,index){
				const _this = this;
				let userInfo = uni.getStorageSync('userInfo')
				if(index == 0 && (userInfo.userId == _this.userId)){
					_this.visibleToast = true;
					_this.jjItems = item;
				}
			},
			//竞价
			bindingEiame(){
				const _this = this;
				_this.loadingJump = true;
				_this.$http('/api/auth/item/auditItemBidding','POST',{
					biddingId:_this.jjItems.biddingId,
					biddingType:'10017002'
				}).then(res=>{
					_this.loadingJump = false;
					if(res && res.data.code == '0'){
						_this.visibleToast = false;
						_this.$showToast('成功～');
						_this.page.pageIndex = 1;
						_this.getRankList();
					}else{
						_this.$showToast(res.msg);
					}
				}).catch(()=>{
					_this.loadingJump = false;
				});
			}
		},
		onPullDownRefresh() {
			this.page.pageIndex = 1;
			this.getRankList();
		},
		//滚动到底部
		onReachBottom() {
			const _this =this;
			console.log(_this.page.pageIndex,_this.page.totalPage)
			if(_this.page.pageIndex < _this.page.totalPage){
				_this.page.pageIndex++;
				_this.getRankList();
			}else{
				_this.isDoneTask = true;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.jump_ranks{
		box-sizing: border-box;
		width: 560rpx;
		padding: 32rpx 40rpx 0;
		background-color: #fff;
		border-radius: 12rpx;
		color: #333;
		position: relative;
		text-align: center;
		min-height: 320rpx;
		font-size: 30rpx;
		.t_j_text{
			font-size: 28rpx;
			margin-top: 60rpx;
		}
		.t_bottom_btn{
			position: absolute;
			bottom: 0;left: 0;right: 0;
			height: 80rpx;
			border-top: solid 2rpx #E6E6E6;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			.btn_t{
				width: 50%;height: 80rpx;
				@include flex_center;
				&:first-child{
					border-right: solid 1rpx #E6E6E6;
				}
				&.tips{
					color: $ych_color;
				}
			}
		}
	}
	.warps_info{
		box-sizing: border-box;
		width: 560rpx;
		height: 580rpx;
		padding: 44rpx 40rpx 0;
		background: url('/static/image/bgs@2x.png') no-repeat center;
		background-size: 100% 100%;
		font-size: 24rpx;
		color: #999;
		position: relative;
		.ico_copy{
			width: 20rpx;height: 22rpx;
			margin-left: 10rpx;
		}
		.t_title{
			font-size: 40rpx;
			color: #fff;
		}
		.t_title_e{
			font-size: 32rpx;
			color: #fff;
		}
		.t_title_name{
			font-size: 28rpx;
			color: #1A1A1A;
			margin-top: 80rpx;
			margin-bottom: 22rpx;
		}
		.t_top{
			margin-top: 20rpx;
		}
		.t_bottom_btn{
			position: absolute;
			bottom: 0;left: 0;right: 0;
			height: 80rpx;
			border-top: solid 2rpx #E6E6E6;
			width: 100%;
			font-size: 28rpx;
			color: #333333;
			.btn_t{
				width: 50%;height: 80rpx;
				@include flex_center;
				&:first-child{
					border-right: solid 1rpx #E6E6E6;
				}
			}
		}

	}
	.biding_warp{
		width: 100%;
		color: #333;
		font-size: 28rpx;
		.biding_item{
			padding: 24rpx;
			border-top: solid 1rpx #F6F6F6;
			.fb_user_rank{
				width: 60rpx;
				height: 44rpx;
				margin-right: 36rpx;
				@include flex_center;
			}
			.fb_user_head{
				width: 72rpx;
				height: 72rpx;
				margin-right: 20rpx;
				image{
					border-radius: 50%;
				}
			}
			.rank_info{
				.fb_time{
					font-size: 22rpx;
				}
			}
			.rank_m{
				color: #E6212A;
			}
		}
		.biding_btn_warp{
			width: 100%;
			position: fixed;
			bottom: 80rpx;
			@include flex_center;
			.biding_btn{
				width: 606rpx;
				height: 88rpx;
				background-color: $ych_color;
				border-radius: 12rpx;
				font-size: 30rpx;
				color: #fff;
				@include flex_center;
				@include box_shadow_btn;
			}
		}
	}
</style>
